<% include header_index.html %>

<style>

    .header{
        width: 100vw;
        background: white;
    }
    .header_div{
        width: 355px;
        margin: 0 auto;
    }
    .header_div img{
        width: 20px;
        height:20px;
        margin-top: 12px;
    }
    .header_div p{
        font-size: 15px;
        color: #181818;
        line-height: 44px;
        text-align: center;
    }
    body{
        background: rgb(243,243,243);
    }
    ::-webkit-scrollbar {/*隐藏滚轮*/
        display: none;!important;
    }
    .member_div{
        height:70px;
        width: 100vw;
        background: white;
    }
    .member_left_div{
        width: 50vw;
        height:70px;
    }
    .member_logo{
        width: 50px;
        height:50px;
        margin: 10px;
    }
    .member_name{
        margin-top: 10px;
        width:100px;
        font-weight: bold;
        font-size: 15px;
        line-height: 25px;
        color: #454545;
    }
    .register_date{
        width: 100px;
        font-size: 13px;
        color: #adadad;
    }
    .member_right_div{
        width: 167px;
        margin-right: 10px;
        text-align: right;
        float: left;
        line-height: 70px;
        color: #feb90c;
        font-size: 13px;
    }
    .buy_img{
        width: 100vw;
        height:100vw;
    }
    .price{
        width: 50vw;
        background: white;
        float: left;
        height:44px;
        line-height: 44px;
        font-size: 15px;
        color: #feb90c;
        text-indent: 10px;
    }
    .num{
        font-size: 15px;
        float: left;
        background: white;
        line-height: 44px;
        height: 44px;
        text-align: right;
        width: 177px;
        color: #454545;
    }
    .white{
        background: white;
    }
    .w100{
        width: 100vw;
    }
    .num d{
        color: #b80a2f;
    }
    .intro{
        float: left;
        background: white;
        height:auto;
        margin: 0 10px;
        font-size:15px;
        color: #adadad;
        margin-bottom: 15px;
    }
    .intro d{
        color: #454545;
    }
    .detail_title,.msg_title{
        width:100vw;
        float: left;
        margin-top: 10px;
        background: white;
        text-align: center;
        line-height: 44px;
        font-size:15px;

        color: #454545;
    }
    .detail{
        margin:0 10px;
        background: white;
        height:auto;
    }
    .msg_input_div{
        width: 100vw;
        background: white;

    }
    .input_div{
        margin: 0 10px;
        border-bottom: 1px solid rgb(239,239,244);
    }
    .left{
        width: 40%;
        color: #454545;
        font-size: 15px;
        line-height: 44px;
        text-indent: 10px;
        height:44px;
        float: left;
    }
    .right{
        width: 60%;
        float: left;
    }
    .msg_input{
        float: right;
        margin:7px 10px;
        height:30px;
        border: none;
        width: 200px;
    }
    .sub_button{

        width: 355px;
        margin:10px;
        background: linear-gradient(to right,#feb90c,#ff8000);
        border-radius: 6px;
        color: white;
        line-height: 44px;
        text-align: center;
        font-size: 15px;
    }
    .bottom_div{
        width: 100vw;
        height:49px;
    }
    .bottom_div p{
        width: 187px;
        text-align: center;
        height:49px;
        line-height: 49px;
        color: #454545;
        font-size: 15px;
        float: left;
        background: white;
    }
    .bottom_div div{
        width: 1px;
        float: left;
        height:49px;
        background: rgb(239,239,239);
    }
    .detail{
        overflow: hidden;
        width: 355px;
    }
    .detail table{
        max-width: 355px;
    }

    .detail img{
        width: 167px;
        text-align: center;
        height: 3px;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        left: 10px;
        display: none;
    }
</style>
<div class="big_div">
    <div class="h44 header">
        <div class="header_div h44">
            <img src="images/default_wap/return.png" class="back fl" alt="">
            <img src="images/default_wap/moreblack.png" class="back fr" alt="">
            <p>
                詳情
            </p>
        </div>
    </div>


    <div class="member_div">
        <div   class="member_left_div fl">
            <img src="images/default_wap/load.png"  class="member_logo fl" alt="" :data-src="'http://www.phmall.com.ph/union/'+member_image">
            <p class="member_name fl">{{member_id}}</p>
            <p class="register_date fl">{{register_date}}</p>
        </div>
        <div class="member_right_div">
            {{status}}
        </div>
    </div>

    <img src="images/default_wap/load.png" :data-src="'http://www.phmall.com.ph/'+pic" class="buy_img fl" alt="">

    <div class="white w100 fl">
        <p class="price">
            价格：{{price}}
        </p>
        <p class="num">剩余： <d>{{num}}</d>件</p>
        <p class="intro"><d>简介：</d>{{intro}}</p>
    </div>

    <div class="h44 detail_title">详细信息</div>
    <div class="w100 white fl">
    <div class="detail fl" v-html="detail">

    </div>
    </div>

    <div class="msg_title h44">我要留言</div>
    <div class="msg_input_div fl">
        <div class="h44 input_div">
            <p class="left">联系姓名*：</p>
            <p class="right"><input type="text" placeholder="必填" v-model="name" class="msg_input"></p>
        </div>
        <div class="h44 input_div">
            <p class="left">联系方式*：</p>
            <p class="right"><input type="text" placeholder="必填" v-model="tel" class="msg_input"></p>
        </div>
        <div class="h44 input_div">
            <p class="left">联系地址*：</p>
            <p class="right"><input type="text" placeholder="必填" v-model="address" class="msg_input"></p>
        </div>
        <div class="h44 input_div"  style="height: 80px;">
            <p class="left">留言内容*：</p>
            <p class="right"><textarea style="height: 60px;" placeholder="必填" v-model="msg" class="msg_input"></textarea></p>
        </div>
    </div>
    <div class="h44 sub_button fl" @click="sub()">提交</div>





    <div class="bottom_div">
        <a :href="'tel:'+tels"><p>手机联系</p></a>
        <div></div>
        <p>在线联系</p>
    </div>
</div>

<script>
    var page = new Vue({
        el: '.big_div',
        data: {
            detail:'',
            price:0,
            intro:"",
            pic:'',
            num:'',
            register_date:"",
            member_id:'',
            member_image:'',
            sup_uid:0,
            tels:0,
            buy_m_uid:0,
            status:'进行中',
            name:'',
            address:''

        },
        methods:{
            sub:function () {
                $.post('/buy_detail/submit',{name:this.name,tel:this.tel,address:this.address,msg:this.msg,buy_uid:this.buy_uid,buy_m_uid:this.buy_m_uid},function (result) {
                    result=result.data;
                    var t=this;
                    if(result==1)
                    {
                        $.toptip('留言成功','success');
                        t.name="";
                        t.tel="";
                        t.address='';
                        t.msg='';
                    }
                    else if(result==0)
                    {
                        window.location.href='./login';
                    }
                });
            }
        },
        mounted:function () {
            var t=this;
            $.post('./buy_detail',{uid:'<%= uid %>'},function (result) {
                result=result.data;
                var detail=result['0'].detail.replace(new RegExp('src="/english',"gm"),'src="http://www.phmall.com.ph');
                detail=detail.replace(new RegExp('src="/union',"gm"),'src="http://www.phmall.com.ph/union');
                detail=detail.replace(/<script>/g, "<c>");
                detail=detail.replace(/<\/script>/g, "</c>");
                t.detail=detail;
                t.buy_uid=result[0].uid;
                t.buy_m_uid=result[0].m_uid;

                if(result==0){
                    t.status='未审核';
                }
                else if(result==10) {
                    t.status='已结束';
                }

                if(result[0].price==0 || result[0].price=='' || result[0].price==null)
                {
                    result[0].price='商议';
                }
                t.tels=result[0].tel;
                t.price=result[0].price;
                t.intro=result[0].intro;
                t.num=result[0].num;
                t.pic=result[0].pic;
                t.register_date=return_date(result[0].register_date);
                t.member_id=result[0].member_id;
                t.member_image=result[0].member_image;
            })
        }
    });

</script>






<!--底部栏-->
<% include footer.html %>
